<template>
  <div style="width: 100%;height: 100%">
    <div style="width: 400px;margin:150px auto">
      <div style="color: grey;font-size: 30px; text-align: center;padding: 30px">❀欢迎注册❀</div>
      <el-form :model="form" size="normal">
        <el-form-item>
          <el-icon style="color: grey"><avatar /></el-icon>
          <el-input v-model="form.username" placeholder="用户名" style="width: 90%" />
        </el-form-item>
        <el-form-item>
          <el-icon style="color: grey"><key /></el-icon>
          <el-input v-model="form.password" placeholder="密码" style="width: 90%" show-password />
        </el-form-item>
        <el-form-item>
          <el-icon style="color: grey"><key /></el-icon>
          <el-input v-model="form.confirm" placeholder="再次输入确认密码" style="width: 90%" show-password />
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import avatar from "@element-plus/icons-vue/dist/es/avatar.mjs";
import key from "@element-plus/icons-vue/dist/es/key.mjs";
import request from "@/utils/request";

export default {
  name: "RegisterView",
  components: {
    avatar,
    key
  },

  data() {
    return{
      avatar: {},
      form: {}
    }
  },
  // to do: 向后台发送登录请求
  methods:{
    register() {
      request.post("http://124.70.179.188:8082/api/user/login", this.form).then(res => {
        if (res.code === '0'){
          this.$message({
            type:"success",
            message:"登录成功"
          })
          // to do：登录成功后实现页面跳转，跳转到主页
          this.$router.push("http://124.70.179.188:8082/home")
        } else {
          this.$message({
            type:"error",
            message: res.msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>